<template>
  <div class="environment-total chart-box1">
    <div class="chart-title">环境质量统计</div>
    <div class="chart-content table-board">
      <a-row
        class="header text-center"
        :wrap="false"
        style="height: 4rem; line-height: 2rem"
      >
        <a-col :span="config.span[0]">
          <div class="header-col">楼层</div>
        </a-col>
        <a-col :span="config.span[1]">
          <div class="header-col flex-col">
            <span>温度</span>
            <span class="unit">℃</span>
          </div>
        </a-col>
        <a-col :span="config.span[2]">
          <div class="header-col flex-col">
            <span>湿度</span>
            <span class="unit">%</span>
          </div>
        </a-col>
        <a-col :span="config.span[3]">
          <div class="header-col flex-col">
            <span>CO₂</span>
            <span class="unit">ppm</span>
          </div>
        </a-col>
        <a-col :span="config.span[4]">
          <div class="header-col flex-col">舒适性</div>
        </a-col>
      </a-row>
      <div class="table-content">
        <ScrollTable
          v-if="$store.getters.datavCurBuilding.id"
          :header="tableHeader"
          :showHeader="false"
          :list="list"
          :config="config"
        />
        <div v-else class="no-building-tip">选择楼宇才能查看</div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, onMounted, reactive, toRefs, watch } from "vue";
import store from "../../../../store";
import common from "../../utils/common";
import ScrollTable from "../common/ScrollTable.vue";
export default defineComponent({
  name: "EnvironmentTotal ",
  components: { ScrollTable },
  setup(props) {
    const state = reactive({
      tableHeader: [
        { key: "layer", title: "楼层" },
        { key: "temp", title: "温度" },
        { key: "humidity", title: "湿度" },
        { key: "co2", title: "CO₂" },
        { key: "comfort", title: "舒适性" },
      ],
      config: {
        span: [6, 4, 4, 4, 6],
        style: [{ color: "#fff" }],
      },
      list: [],
    });

    const colorMap = {
      yellow: common.theme.primaryYellow,
      green: common.theme.lightGreen,
      red: common.theme.primaryRed,
    };
    const getData = () => {
      const { TVOCList } = store.getters.synthetical;
      if (TVOCList && TVOCList.list && TVOCList.list.length) {
        state.list = TVOCList.list.map((item) => {
          return {
            layer: item.layer,
            temp: item.temp.text,
            co2: item.co2.text,
            humidity: item.humidity.text,
            comfort: item.comfort.text,
            style: {
              temp: {
                color: colorMap[item.temp.color],
              },
              co2: {
                color: colorMap[item.co2.color],
              },
              humidity: {
                color: colorMap[item.humidity.color],
              },
              comfort: {
                color: colorMap[item.comfort.color],
              },
            },
          };
        });
      } else {
        state.list = [];
      }
    };

    getData();

    return {
      ...toRefs(state),
    };
  },
});
</script>
<style lang="less" scoped>
@import "../../styles/common.less";
.unit {
  color: rgba(255, 255, 255, 0.4);
  margin-top: -4px;
}
</style>
